<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <form action="###" @submit.prevent="sub">
            姓名(文本):<input type="text" v-model="name">
            <br><br>

            性别(单选按钮)
            <input type="radio" name="sex" value="1" v-model="sex">男
            <input type="radio" name="sex" value="0" v-model="sex">女
            <br><br>

            技能(多选框)
            <input type="checkbox" name="skills" value="java" v-model="skills" >Java开发
            <input type="checkbox" name="skills" value="vue"v-model="skills" >Vue.js开发
            <input type="checkbox" name="skills" value="python" v-model="skills" >python开发
            <br><br>

            城市(下拉框)
            <select name="citys" v-model="city">
                <option v-for="city in citys" :value="city.code">{{city.name}}</option>
            </select>
            <br><br>

            说明(多行文本): <textarea cols="30" rows="5" v-model="desc"></textarea>
            <br><br>
            <button type="submit">提交</button>
        </form>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                name:"",
                sex:1, //性别默认为男
                skills:['java','vue'], //多选按钮默认选中java和vue
                citys:[
                    {code:"cq",name:"重庆"},
                    {code:"bj",name:"北京"},
                    {code:"sh",name:"上海"},
                ],
                city:"cq", //下拉框默认选中重庆
                desc:"请输入简短的描述",
            },
            methods: {
                sub:function(){
                    alert(this.name+","+this.sex+","+this.skills+","+this.city+","+this.desc);
                }
            },
        });
    </script>
</body>
</html>